<script setup>
import { ref } from "vue";
import AddressPanel from "./components/AddressPanel.vue";
import ServicePanel from "./components/ServicePanel.vue";
/// 我们的机型顶部区域适配
const { safeAreaInsets } = uni.getSystemInfoSync();

// 存储轮播图的下标
const index = ref(0);
// 更新轮播图下标
const onChange = (ev) => {
  // console.log(ev.detail.current);
  index.value = ev.detail.current;
};

// // 大图预览
// const onTapImage = (url) => {
//   uni.previewImage({
//     current:url,
//     urls:goods.value.pictures
//   })
// }

// uni-ui的弹出窗ref
const popup = ref();

// 改变弹出层的条件渲染
const popupName = ref();
const openPopup = (name) => {
  popupName.value = name;
  popup.value.open();
};

// 是否显示sku组件
const isShowSku = ref(false);
const goodsInfo = ref({
  _id: "002",
  name: "迪奥香水",
  goods_thumb:
    "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
  sku_list: [
    {
      _id: "004",
      goods_id: "002",
      goods_name: "迪奥香水",
      image:
        "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
      price: 19800,
      sku_name_arr: ["50ml/瓶"],
      stock: 100,
    },
    {
      _id: "005",
      goods_id: "002",
      goods_name: "迪奥香水",
      image:
        "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
      price: 9800,
      sku_name_arr: ["70ml/瓶"],
      stock: 100,
    },
  ],
  spec_list: [
    {
      list: [
        {
          name: "20ml/瓶",
        },
        {
          name: "50ml/瓶",
        },
        {
          name: "70ml/瓶",
        },
      ],
      name: "规格",
    },
  ],
});

// 显示加入购物车和立即购买动态显示
const skuMode = ref({
  Both:1,
  Cart:2,
  Buy:3
})
// console.log(skuMode.value.Both);

const mode = ref(skuMode.value.Both)
// 封装动态改变的按钮的函数
const changeSkuMode = (val) => {
  isShowSku.value = true
  mode.value = val
}
</script>

<template>
  <!-- sku弹窗组件 -->
  <vk-data-goods-sku-popup v-model="isShowSku" :localdata="goodsInfo" :mode="mode" />
  <scroll-view scroll-y class="viewport">
    <!-- 基本信息 -->
    <view class="goods">
      <!-- 商品主图 -->
      <view class="preview">
        <swiper @change="onChange" class="swiper" circular>
          <swiper-item class="swiperItem">
            <!--  @tap="onTapImage(item)" -->
            <image mode="aspectFill" src="../../static/images/scj1.jpg" />
          </swiper-item>
          <swiper-item class="swiperItem">
            <image mode="aspectFill" src="../../static/images/scj2.jpg" />
          </swiper-item>
          <swiper-item class="swiperItem">
            <image mode="aspectFill" src="../../static/images/scj3.jpg" />
          </swiper-item>
          <swiper-item class="swiperItem">
            <image mode="aspectFill" src="../../static/images/scj4.jpg" />
          </swiper-item>
          <swiper-item class="swiperItem">
            <image mode="aspectFill" src="../../static/images/scj1.jpg" />
          </swiper-item>
        </swiper>
        <view class="indicator">
          <text class="current">{{ index + 1 }}</text>
          <text class="split">/</text>
          <text class="total">5</text>
        </view>
      </view>

      <!-- 商品简介 -->
      <view class="meta">
        <!-- 绿色背景 -->
        <view class="dCountPrice">
          <!-- 左边 -->
          <view class="price_wraper">
            <view class="price">
              <view class="play">双11狂欢</view>
              <view class="prices"
                ><text class="fh">￥</text><text class="c_price">117.92</text
                ><text class="up">起</text></view
              >
            </view>
            <view class="disCount_price">
              <text class="after">折后</text>
              <text class="fh">￥ </text>
              <text class="c_price">99.96 </text>
              <text class="up"> 起</text>
            </view>
          </view>
          <!-- 右边 -->
          <view class="right_wraper">
            <text class="time">11月10日20:00开卖</text>
            <text class="qg">快来抢购吧</text>
          </view>
        </view>
      </view>
      <!-- 下面真实价格 -->
      <view class="confirm_price">￥128起</view>

      <!-- 文字描述 -->
      <view class="text_desc"
        >千百剂杀虫剂花卉植物通用画药花草专用玉米杀虫剂多虫多剂家用外用</view
      >

      <!--已售4000+ -->
      <view class="alerdy_goods">已售4000+</view>

      <!-- 操作面板 -->
      <view class="action">
        <navigator
          url="/pages/delivery/delivery"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          <view class="item">
            <view class="car_wrpaer">
              <view class="car_icon">
                <image
                  src="../../static/images/transition.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="car_desc">
                <view>山东青岛&nbsp;&nbsp; 快递:免运费</view>
                <view>配送至：&nbsp;&nbsp;襄阳襄城 隆中街道</view>
                <view>现货，付款后48小时内发货</view>
              </view>
            </view>
            <view class="arrow">
              <image src="../../static//images/arrow.png" mode="scaleToFill" />
            </view>
          </view>
        </navigator>
        <view class="item" @tap="openPopup('sevenWeek')">
          <view class="car_wrpaer">
            <view class="car_icon">
              <image
                src="../../static/images/good_heard.png"
                mode="scaleToFill"
              />
            </view>
            <view class="seven_week">
              <view>7天无理由退货</view>
            </view>
          </view>
          <view class="arrow">
            <image src="../../static//images/arrow.png" mode="scaleToFill" />
          </view>
        </view>
        <view class="item" @tap="changeSkuMode(skuMode.Both)" >
          <view class="car_wrpaer">
            <view class="car_icon">
              <image
                src="../../static/images/classify.png"
                mode="scaleToFill"
              />
            </view>
            <view class="classify">
              <text class="gramm">30g</text>
              <text class="gramm">60g</text>
              <text class="gramm">90g</text>
              <text class="gramm">...</text>
            </view>
            <view class="selected">规格详情</view>
          </view>
          <view class="arrow">
            <image src="../../static//images/arrow.png" mode="scaleToFill" />
          </view>
        </view>
        <view class="item" @tap="openPopup('brand')">
          <view class="car_wrpaer">
            <view class="car_icon">
              <image src="../../static/images/R.png" mode="scaleToFill" />
            </view>
            <view class="brand">
              <text>品牌 . 生产企业 . 净含量 . 毒性 . 剂型</text>
            </view>
          </view>
          <view class="arrow">
            <image src="../../static/images/arrow.png" mode="scaleToFill" />
          </view>
        </view>
      </view>
    </view>

    <!-- uni-ui弹出层 -->
    <uni-popup ref="popup" type="bottom" background-color="#fff">
      <AddressPanel v-if="popupName === 'sevenWeek'" @close="popup.close()" />
      <ServicePanel v-if="popupName === 'brand'" @close="popup.close()" />
    </uni-popup>

    <!-- 商品详情 -->
    <view class="detail panel">
      <view class="content">
        <view class="properties"> </view>
        <!-- 图片详情 -->
        <image
          mode="widthFix"
          style="width: 100%"
          height="100%"
          src="../../static/images/goods_desc2.jpg"
        ></image>
        <image
          mode="widthFix"
          style="width: 100%"
          height="100%"
          src="../../static/images/goods_desc1.jpg"
        ></image>
        <image
          mode="widthFix"
          style="width: 100%"
          height="100%"
          src="../../static/images/goods_desc3.jpg"
        ></image>
        <image
          mode="widthFix"
          style="width: 100%"
          height="100%"
          src="../../static/images/goods_desc4.jpg"
        ></image>
        <image
          mode="widthFix"
          style="width: 100%"
          height="100%"
          src="../../static/images/goods_desc5.jpg"
        ></image>
        <image
          mode="widthFix"
          style="width: 100%"
          height="100%"
          src="../../static/images/goods_desc6.jpg"
        ></image>
      </view>
    </view>
  </scroll-view>

  <!-- 用户操作 -->
  <view
    class="toolbar"
    :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
  >
    <view class="icons">
      <button class="icons-button"><text class="icon-heart"></text>收藏</button>
      <button class="icons-button" open-type="contact">
        <text class="icon-handset"></text>客服
      </button>
      <navigator
        class="icons-button"
        url="/pages/cart/cart"
        open-type="switchTab"
      >
        <text class="icon-cart"></text>购物车
      </navigator>
    </view>
    <view class="buttons">
      <view class="addcart" @tap="changeSkuMode(skuMode.Cart)"> 加入购物车 </view>
      <view class="buynow" @tap="changeSkuMode(skuMode.Buy)"> 立即购买 </view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  // overflow: hidden;
  // display: flex;
  // flex-direction: column;
}

.viewport {
  background-color: #f4f4f4;
  height: 100%;
}

.panel {
  margin-top: 20rpx;
  background-color: #fff;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90rpx;
    line-height: 1;
    padding: 30rpx 60rpx 30rpx 6rpx;
    position: relative;
    text {
      padding-left: 10rpx;
      font-size: 28rpx;
      color: #333;
      font-weight: 600;
      border-left: 4rpx solid #27ba9b;
    }
    navigator {
      font-size: 24rpx;
      color: #666;
    }
  }
}

/* 商品信息 */
.goods {
  background-color: #fff;
  .preview {
    height: 750rpx;
    position: relative;
    .swiper {
      width: 750rpx;
      height: 750rpx;
      .swiperItem {
        width: 100%;
        height: 100%;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .image {
      width: 750rpx;
      height: 750rpx;
    }
    .indicator {
      height: 40rpx;
      padding: 0 24rpx;
      line-height: 40rpx;
      border-radius: 30rpx;
      color: #fff;
      font-family: Arial, Helvetica, sans-serif;
      background-color: rgba(0, 0, 0, 0.3);
      position: absolute;
      bottom: 30rpx;
      right: 30rpx;
      .current {
        font-size: 26rpx;
      }
      .split {
        font-size: 24rpx;
        margin: 0 1rpx 0 2rpx;
      }
      .total {
        font-size: 24rpx;
      }
    }
  }
  .meta {
    position: relative;
    border-bottom: 1rpx solid #eaeaea;
    .dCountPrice {
      height: 130rpx;
      padding: 25rpx 30rpx 0;
      color: #fff;
      font-size: 34rpx;
      box-sizing: border-box;
      background-color: #35c8a9;
      .price_wraper {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        width: 500rpx;
        height: 100%;
        // background-color: red;
        .price {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding-left: 20rpx;
          box-sizing: border-box;
          width: 200rpx;
          height: 100%;
          // background-color: pink;
          .play {
            font-size: 30rpx;
            font-family: "Cooper";
          }
          .prices {
            .fh {
              font-size: 30rpx;
            }
            .up {
              font-size: 25rpx;
            }
          }
        }
        .disCount_price {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 250rpx;
          height: 60rpx;
          margin-top: 40rpx;
          background-color: #fff;
          border-radius: 50rpx;
          color: #4dc58e;
          .after {
            font-size: 25rpx;
          }
          .fh {
            font-size: 30rpx;
          }
          .up {
            font-size: 25rpx;
          }
        }
      }
      .right_wraper {
        padding-left: 10rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 0;
        width: 250rpx;
        height: 100%;
        // background-color: pink;
        font-size: 27rpx;
        .time {
          margin-bottom: 10rpx;
        }
        .qg {
          letter-spacing: 2rpx;
        }
      }
    }
    .number {
      font-size: 56rpx;
    }
    .brand {
      width: 160rpx;
      height: 80rpx;
      overflow: hidden;
      position: absolute;
      top: 26rpx;
      right: 30rpx;
    }
    .name {
      max-height: 88rpx;
      line-height: 1.4;
      margin: 20rpx;
      font-size: 32rpx;
      color: #333;
    }
    .desc {
      line-height: 1;
      padding: 0 20rpx 30rpx;
      font-size: 24rpx;
      color: #cf4444;
    }
  }
  .confirm_price {
    color: red;
    letter-spacing: 3rpx;
    margin-left: 20rpx;
    // margin-top: 10rpx;
  }
  .action {
    // width:100%;
    margin-top: 20rpx;
    background-color: #f9f7f7;
    padding: 0rpx 20rpx;
    height: 550rpx;
    overflow: hidden;
    .item {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
      .car_wrpaer {
        display: flex;
        width: 600rpx;
        height: 100%;
        .car_icon {
          width: 50rpx;
          height: 50rpx;
          margin-top: 50rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .car_desc {
          display: flex;
          flex-direction: column;
          margin-top: 20rpx;
          letter-spacing: 3rpx;
          margin-left: 40rpx;
          view:nth-child(1) {
            font-size: 30rpx;
          }
          view:nth-child(2) {
            font-size: 25rpx;
            color: #a4a4a4;
            margin: 10rpx 0rpx;
          }
          view:nth-child(3) {
            font-size: 25rpx;
          }
        }
      }
      .arrow {
        width: 20rpx;
        height: 20rpx;
        // background-color: red;
        margin-top: 60rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .seven_week {
        font-size: 28rpx;
        margin-top: 55rpx;
        margin-left: 50rpx;
        letter-spacing: 3rpx;
      }
      .classify {
        width: 400rpx;
        // background-color: pink;
        display: flex;
        justify-content: space-around;
        margin-top: 55rpx;
        margin-left: 30rpx;
        .gramm {
          background-color: #fff;
          font-size: 28rpx;
          padding: 5rpx 20rpx;
        }
      }
      .selected {
        //  background-color: red;
        font-size: 25rpx;
        margin-top: 60rpx;
      }
      .brand {
        display: flex;
        align-items: center;
        // width: 600rpx;
        // background-color: red;
        margin-left: 40rpx;
        margin-top: 40rpx;
        font-size: 28rpx;
      }
    }
  }
  .text_desc {
    font-size: 30rpx;
    margin-left: 20rpx;
  }
  .alerdy_goods {
    font-size: 25rpx;
    color: #ccc;
    margin-left: 20rpx;
    margin-top: 16rpx;
    letter-spacing: 3rpx;
  }
}

/* 商品详情 */
.detail {
  padding-left: 20rpx;
  .content {
    margin-left: -20rpx;
    .image {
      width: 100%;
    }
  }
  .properties {
    padding: 0 20rpx;
    margin-bottom: 30rpx;
    .item {
      display: flex;
      line-height: 2;
      padding: 10rpx;
      font-size: 26rpx;
      color: #333;
      border-bottom: 1rpx dashed #ccc;
    }
    .label {
      width: 200rpx;
    }
    .value {
      flex: 1;
    }
  }
}

/* 同类推荐 */
.similar {
  .content {
    padding: 0 20rpx 200rpx;
    background-color: #f4f4f4;
    display: flex;
    flex-wrap: wrap;
    .goods {
      width: 340rpx;
      padding: 24rpx 20rpx 20rpx;
      margin: 20rpx 7rpx;
      border-radius: 10rpx;
      background-color: #fff;
    }
    .image {
      width: 300rpx;
      height: 260rpx;
    }
    .name {
      height: 80rpx;
      margin: 10rpx 0;
      font-size: 26rpx;
      color: #262626;
    }
    .price {
      line-height: 1;
      font-size: 20rpx;
      color: #cf4444;
    }
    .number {
      font-size: 26rpx;
      margin-left: 2rpx;
    }
  }
  navigator {
    &:nth-child(even) {
      margin-right: 0;
    }
  }
}

/* 底部工具栏 */
.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: #fff;
  height: 100rpx;
  padding: 0 20rpx var(--window-bottom);
  border-top: 1rpx solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: content-box;
  .buttons {
    display: flex;
    & > view {
      width: 220rpx;
      text-align: center;
      line-height: 72rpx;
      font-size: 26rpx;
      color: #fff;
      border-radius: 72rpx;
    }
    .addcart {
      background-color: #ffa868;
    }
    .buynow,
    .payment {
      background-color: #27ba9b;
      margin-left: 20rpx;
    }
  }
  .icons {
    padding-right: 10rpx;
    display: flex;
    align-items: center;
    flex: 1;
    .icons-button {
      flex: 1;
      text-align: center;
      line-height: 1.4;
      padding: 0;
      margin: 0;
      border-radius: 0;
      font-size: 20rpx;
      color: #333;
      background-color: #fff;
      &::after {
        border: none;
      }
    }
    text {
      display: block;
      font-size: 34rpx;
    }
  }
}
</style>
